<template>
  <div id="classroom_manage" class="container">
    <div class="content">
      <!-- <div class="title">教室管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input
              style="width: 3.5rem;"
              placeholder="搜索 教室名称"
              clearable
              v-model="searchText"
              class="input_search"
            ></el-input>
            <div @click="searchClassroom()" v-if="hasApi('classRoomList')" class="search_btn" style="margin-left:0.1rem;">搜索</div>
            <div
              class="right_btn"
              v-if="hasApi('classRoomAdd')"
              @click="dialogFormVisible = true"
            >新&nbsp&nbsp增</div>
          </div>
        </div>

        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 4rem;">教室名称</td>
                <td style="width: 4rem;">所属校区</td>
                <td style="width: 4rem;">容纳人数</td>
                <td style="width: 4rem;">备注</td>
                <td style="width: 4rem;">创建时间</td>
                <td style="width: 4rem;">创建人</td>
                <td
                  style="width: 2rem;"
                  v-if="hasApi('classRoomUpdate')||hasApi('classRoomDetele')"
                >操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in classroomList">
                <td>{{item.name}}</td>
                <td>{{item.campusName}}</td>
                <td>{{item.amount}}</td>
                <td>{{item.remark}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.createUserName}}</td>
                <td v-if="hasApi('classRoomUpdate')||hasApi('classRoomDetele')">
                  <span
                    class="operate_btn"
                    @click="handleEdit(index,item)"
                    v-if="hasApi('classRoomUpdate')"
                  >编辑</span>
                  &nbsp;
                  <span
                    class="operate_btn"
                    v-if="hasApi('classRoomDetele')"
                    @click="handleDelete(index,item)"
                  >删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currentPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="新建教室"
      :visible.sync="dialogFormVisible"
      center
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="form">
        <el-form-item
          label="教室名称"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '教室名称不能为空'}]"
        >
          <el-input
            style="width:70%"
            clearable
            maxlength="10"
            v-model="form.name"
            placeholder="请输入教室名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="容纳人数"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '容纳人数不能为空'}]"
        >
          <!-- <el-input style="width:70%" type="number"  min='0' max='300' v-model="form.amount"
          placeholder="请输入容纳人数"></el-input>-->
          <el-input-number
            class="newclassroomNumber"
            style="width:70%;"
            v-model="form.amount"
            :min="1"
            :max="300"
            label="请输入容纳人数"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            style="width:70%"
            maxlength="50"
            clearable
            v-model="form.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCofim()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑教室"
      :visible.sync="dialogFormVisible_update"
      center
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="form_update">
        <el-form-item
          label="教室名称"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '教室名称不能为空'}]"
        >
          <el-input
            style="width:70%"
            clearable
            maxlength="10"
            v-model="form_update.name"
            placeholder="请输入教室名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="容纳人数"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '容纳人数不能为空'}]"
        >
          <!-- <el-input
            style="width:70%"
            type="number"
            onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
            v-model="form_update.amount"
            placeholder="请输入容纳人数"
          ></el-input>-->
          <el-input-number
            class="newclassroomNumber"
            style="width:70%;"
            v-model="form_update.amount"
            :min="1"
            :max="300"
            label="请输入容纳人数"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            style="width:70%"
            maxlength="50"
            clearable
            v-model="form_update.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_update = false">取 消</el-button>
        <el-button type="primary" @click="updateCofim()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import { constants } from "fs";
let vm;
let user;
export default {
  data() {
    return {
      searchText: "", //搜索框输入文本
      tabledisplayObj: {
        currentPage: 1,
        size: 10,
        total: 0
      },
      isShowSearch: false,
      classroomList: [],
      campusList: [],
      formLabelWidth: "140px",
      dialogFormVisible: false,
      dialogFormVisible_update: false,
      form: {
        name: "",
        amount: "",
        remark: ""
      },
      form_update: {
        name: "",
        amount: "",
        remark: "",
        campusId: 0,
        classroomId: 0
      },
      /**角色权限限制 */
      disableByRole: {
        newBtn: "visible",
        editorBtn: true,
        deleteBtn: true
      }
    };
  },
  components: {},
  watch: {
    // 如果 `searchText` 发生改变，这个函数就会运行
    searchText: function(newSearchText, oldSearchText) {
      if (newSearchText == "") {
        this.tabledisplayObj.currentPage = 1;
        this.isShowSearch = false;
        this.initData();
      }
    }
  },
  methods: {
    campusChange: function(campusId) {
      let paras = {
        currPage: this.tabledisplayObj.currentPage,
        pageSize: this.tabledisplayObj.size,
        campusId: campusId
      }; //设置请求列表参数
      if (this.isShowSearch) {
        paras.name = this.searchText;
      }
      this.getData(paras);
    },
    /**
     * 初始化数据
     */
    initData() {
      let paras = {
        currPage: this.tabledisplayObj.currentPage,
        pageSize: this.tabledisplayObj.size,
        campusId: this.$store.state.campusId
      }; //设置请求列表参数
      if (this.isShowSearch) {
        paras.name = this.searchText;
      }
      this.getData(paras);
      this.disableOperationByRole();
    },
    /**根据角色权限限制操作 */
    disableOperationByRole() {
      switch (user.roleMode) {
        //超级管理员
        case 0: {
          this.disableByRole = {
            newBtn: "hidden",
            editorBtn: false,
            deleteBtn: false
          };
          break;
        }
        //机构管理员
        case 1: {
          this.disableByRole = {
            newBtn: "visible",
            editorBtn: true,
            deleteBtn: true
          };
          break;
        }
        //校区管理员
        case 2: {
          this.disableByRole = {
            newBtn: "visible",
            editorBtn: true,
            deleteBtn: true
          };
          break;
        }
      }
    },
    /**
     * 抽取出来获取列表
     */
    getData(paras) {
      let classroomtemp = []; //临时存放列表
      api.classRoomList(paras).then(function(data) {
        if (data.resultCode == 2000) {
          classroomtemp = data.list;
          for (let i = 0; i < classroomtemp.length; i++) {
            classroomtemp[i].createTime = classroomtemp[i].createTime.split(
              " "
            )[0];
          }
          vm.tabledisplayObj.total = data.totalCount;
          vm.classroomList = classroomtemp;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    pageSizeChange: function(val) {
      this.tabledisplayObj.size = val;
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currentPage = val;
      this.initData();
    },
    /**
     * 向数组中添加数据
     */
    addCofim() {
      if (this.form.name == "") {
        this.$message.warning("教室名称不能为空");
        return;
      }
      if (!tool.judge("classname", this.form.name)) {
        this.$message.warning("请输入有效的教室名称");
        return;
      }
      if (this.form.amount == "") {
        this.$message.warning("容纳人数不能为空");
        return;
      }
      if (!tool.judge("integer", this.form.amount)) {
        this.$message.warning("容纳人数需为正整数");
        return;
      }
      let paras = {
        name: this.form.name,
        amount: this.form.amount,
        remark: this.form.remark,
        campusId: vm.$store.state.campusId
      };
      api.classRoomAdd(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.dialogFormVisible = false;
          vm.form = {
            name: "",
            amount: "",
            remark: ""
          };
          vm.initData();
          vm.$message({
            message: "添加教室成功",
            type: "success"
          });
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**
     * 更新/编辑数据
     */
    updateCofim() {
      if (this.form_update.name == "") {
        this.$message.warning("教室名称不能为空");
        return;
      }
      if (!tool.judge("classname", this.form_update.name)) {
        this.$message.warning("请输入有效的教室名称");
        return;
      }
      if (this.form_update.amount == "") {
        this.$message.warning("容纳人数不能为空");
        return;
      }
      if (!tool.judge("integer", this.form_update.amount)) {
        this.$message.warning("容纳人数需为正整数");
        return;
      }
      let paras = {
        name: this.form_update.name,
        amount: this.form_update.amount,
        remark: this.form_update.remark,
        campusId: this.form_update.campusId,
        classroomId: this.form_update.classroomId
      };
      api.classRoomUpdate(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.dialogFormVisible_update = false;
          vm.form_update = {
            name: "",
            amount: "",
            remark: "",
            campusId: 0,
            classroomId: 0
          };
          vm.initData();
          vm.$message({
            message: "编辑教室成功",
            type: "success"
          });
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.form_update = {
        name: row.name,
        amount: row.amount,
        remark: row.remark,
        campusId: row.campusId,
        classroomId: row.classroomId
      };
      this.dialogFormVisible_update = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将删除该教室, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let paras = {
            classroomId: row.classroomId + ""
          };
          api.classRoomDetele(paras).then(function(data) {
            if (data.resultCode == 2000) {
              vm.initData();
              vm.$message({
                message: "删除成功",
                type: "success"
              });
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    /**
     * 搜索教室
     */
    searchClassroom() {
      if (this.searchText == "") return;
      this.tabledisplayObj.currentPage = 1;
      let paras = {
        name: this.searchText,
        currPage: 1,
        pageSize: this.tabledisplayObj.size,
        campusId: this.$store.state.campusId
      }; //设置请求课程类型列表参数
      this.getData(paras);
      this.isShowSearch = true;
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    // this.form.orgId = user.orgId;
    this.initData();
    api.campusList({ orgId: user.orgId + "" }).then(function(data) {
      if (data.result == "操作成功") {
        console.log(data.list);
        vm.campusList = data.list;
      }
    });
  },
  computed: {}
};
</script>

<style lang="scss">
#classroom_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .newclassroomNumber {
    .el-input__inner {
      border-radius: 0.04rem;
      height: 0.4rem;
      line-height: 0.4rem;
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>